<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>八个方向的三角形箭头</title>
		<style type="text/css">
			.topArrow {
				border-bottom: 10px solid #96f;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				width: 0;
				height: 0;
			}
			
			.leftArrow {
				border-right: 10px solid #96f;
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
				width: 0;
				height: 0;
			}
			
			.rightArrow {
				border-left: 10px solid #96f;
				border-top: 10px solid transparent;
				border-bottom: 10px solid transparent;
				width: 0;
				height: 0;
			}
			
			.bottomArrow {
				border-top: 10px solid #96f;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				width: 0;
				height: 0;
			}
			
			.topleftArrow {
				width: 0;
				height: 0;
				border-top: 10px solid red;
				border-right: 10px solid transparent;
			}
			
			.toprighttArrow {
				width: 0;
				height: 0;
				border-top: 10px solid red;
				border-left: 10px solid transparent;
			}
			
			.bottomleftArrow {
				width: 0;
				height: 0;
				border-bottom: 10px solid red;
				border-right: 10px solid transparent;
			}
			
			.bottomrightArrow {
				width: 0;
				height: 0;
				border-bottom: 10px solid red;
				border-left: 10px solid transparent;
			}
		</style>
	</head>

	<body>
		<h1>八个方向的三角形箭头</h1> 上
		<div class="topArrow"></div>
		左
		<div class="leftArrow"></div>
		右
		<div class="rightArrow"></div>
		下
		<div class="bottomArrow"></div>
		左上
		<div class="topleftArrow"></div>
		右上
		<div class="toprighttArrow"></div>
		左下
		<div class="bottomleftArrow"></div>
		右下
		<div class="bottomrightArrow"></div>
	</body>

</html>